<div class="d-flex justify-content-center">
  <div class="col-8">
    @if (post()) {
      <div>
        <h2 data-cy="postDetailsHeading"><span jhiTranslate="blogApp.post.detail.title">Post</span></h2>

        <hr />

        <jhi-alert-error></jhi-alert-error>

        <jhi-alert></jhi-alert>

        <dl class="row-md jh-entity-details">
          <dt><span jhiTranslate="global.field.id">ID</span></dt>
          <dd>
            <span>{{ post()!.id }}</span>
          </dd>
          <dt><span jhiTranslate="blogApp.post.title">Title</span></dt>
          <dd>
            <span>{{ post()!.title }}</span>
          </dd>
          <dt><span jhiTranslate="blogApp.post.content">Content</span></dt>
          <dd>
            <span>{{ post()!.content }}</span>
          </dd>
          <dt><span jhiTranslate="blogApp.post.date">Date</span></dt>
          <dd>
            <span>{{ post()!.date | formatMediumDatetime }}</span>
          </dd>
          <dt><span jhiTranslate="blogApp.post.blog">Blog</span></dt>
          <dd>
            @if (post()!.blog) {
              <div>
                <a [routerLink]="['/blog', post()!.blog?.id, 'view']">{{ post()!.blog?.name }}</a>
              </div>
            }
          </dd>
          <dt><span jhiTranslate="blogApp.post.tag">Tag</span></dt>
          <dd>
            @for (tag of post()!.tags; track $index; let last = $last) {
              <span>
                <a [routerLink]="['/tag', tag.id, 'view']">{{ tag?.name }}</a
                >{{ last ? '' : ', ' }}
              </span>
            }
          </dd>
        </dl>

        <button type="submit" (click)="previousState()" class="btn btn-info" data-cy="entityDetailsBackButton">
          <fa-icon icon="arrow-left"></fa-icon>&nbsp;<span jhiTranslate="entity.action.back">Back</span>
        </button>

        <button type="button" [routerLink]="['/post', post()!.id, 'edit']" class="btn btn-primary">
          <fa-icon icon="pencil-alt"></fa-icon>&nbsp;<span jhiTranslate="entity.action.edit">Edit</span>
        </button>
      </div>
    }
  </div>
</div>
